<template>
	<view class="content">
		<view class="menu-block block">
			<view class="title-top">
				<view class="title">
					评价 ({{count}})
				</view>
			</view>
			<view class="grade">
				<view @click.prevent="noticeActive=item.id" :class="noticeActive===item.id?'active':''" class="tab-item"
					v-for="item in noticeActiveList" :key="item.id">
					<view class="name">
						{{item.name}}
					</view>
					<view class="count" v-if="item.name!='最新'">
						({{item.count}})
					</view>
				</view>
			</view>
		</view>
		<template v-if="scoreList.length>0">
			<view class="menu-block3 block" v-for="item in scoreList" :key="item.id">
				<view class="middle">
					<view class="head">
						<image class="head-img" :src="cloudStorage+item.faveUrl"></image>
					</view>
					<view class="middle-right">
						<view class="middle-right-top">
							<view class="phone">
								{{item.userName}}
							</view>
							<view class="score">
								<uni-rate v-model="item.score" @change="onChange" :readonly="true" active-color="red"
									:size="14" />
							</view>
						</view>
						<view class="img-item" v-if="item.urlList.length>0">
							<view class="img-list" v-for="(item1,index1) in item.urlList" :key="index1">
								<image :src="cloudStorage+item1" class="img" mode="aspectFill"
									@click="previewImgs(item1,index1)">
								</image>
							</view>
						</view>
						<view class="middle-right-middle">
							{{item.content}}
						</view>
						<view class="middle-right-bottom">
							{{item.createTime}}
						</view>
					</view>
				</view>

			</view>
		</template>
		<view v-else style="margin: 40rpx auto;width: 150rpx;">
			暂无评价
		</view>
		<!-- <view class="step" @click="navigate1()">
		<view class="step" @click="navigate1(detail)" v-if="skillTrain.length>0 && entrepreneurshipTrain.length>0">
			写评价
		</view> -->
	</view>
</template>

<script>
	import {
		getCommentByTypeList,
	} from '@/api/acticity.js';
	import {
		type
	} from 'os';
	export default {
		data() {
			return {
				id: 1,
				noticeActive: 1,
				noticeActiveList: [{
						id: 1,
						name: '最新',
						count: 8,
					},
					{
						id: 2,
						name: '好评',
						count: 8,
					},
					{
						id: 3,
						name: '中评',
						count: 8,
					},
					{
						id: 4,
						name: '差评',
						count: 8,
					}
				],
				count: 1,
				rateValue: 4,
				commentType: 1,
				type: null,
				scoreList: [],
			}
		},
		watch: { //监听
			noticeActive: {
				handler(val) {
					this.getCommentByTypeList(val);
				},
				//immediate:true,//深度监听
			},
		},
		methods: {
			previewImgs(current, index) {
				let pic = []
				pic.push(this.cloudStorage + current)
				uni.previewImage({
					current: index,
					urls: pic
				})
			},
			onChange(e) {},
			navigate1(index) {
				uni.navigateTo({
					url: `/page_other/activity/write_comment?id=${this.id}&type=${this.type}`
				})
			},
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			showinfo() {
				this.iSinfo = !this.iSinfo
			},
			showTrue1() {
				this.iStrue1 = !this.iStrue1
			},
			showTrue() {
				this.iStrue = !this.iStrue
			},
			getCommentByTypeList(commentType) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.commentType = commentType
				getCommentByTypeList({
					page: 1,
					limit: 10,
					relationId: this.id,
					commentType: commentType,
				}).then(res => {
					uni.hideLoading()
					this.count = res.count
					this.scoreList = res.list
					this.noticeActiveList = res.commentTypeList
				}).catch(() => {
					uni.hideLoading()
				})
			},
		},
		onLoad(e) {
			this.id = e.id
			this.getCommentByTypeList(this.noticeActive)
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding: 30rpx;
	}

	.step {
		width: 70%;
		height: 100rpx;
		display: flex;
		background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
		color: #fff;
		margin: 30rpx auto;
		border-radius: 60rpx;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 30rpx;
		right: 118rpx;
	}

	.grade {
		display: flex;
		flex-wrap: wrap;

		.tab-item {
			margin: 10rpx 7rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50rpx;
			font-size: 28rpx;
			border-radius: 60rpx;
			color: #767676;
			background-color: #EEEEEE;
			padding: 10rpx 30rpx;
		}

		.tab-item.active {
			margin: 10rpx 7rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50rpx;
			font-size: 28rpx;
			border-radius: 60rpx;
			color: #FF0014;
			// background-color: #FF0014;
			background: rgba(255, 0, 20, 0.1);
			padding: 10rpx 30rpx;
		}
	}

	.title-top {
		display: flex;

		.tips {
			width: 18rpx;
			height: 32rpx;
			border-radius: 20rpx;
			background-color: #0256FF;
			margin: 16rpx 12rpx 0 0;
		}

		.title {
			font-weight: 900;
			font-size: 32rpx;
			line-height: 60rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			margin-bottom: 25rpx;
		}

	}

	.menu-block {
		width: 100%;
		margin-bottom: 20rpx;
		background: #fff;
		border-radius: 12px;
		padding: 30rpx;
	}

	.menu-block3 {
		width: 100%;
		margin-bottom: 30rpx;
		background: #fff;
		border-radius: 12px;
		padding: 30rpx;
		margin-bottom: 20rpx;

		// margin-bottom: 50rpx;
		.top {
			width: 100%;
			height: 44px;
			display: flex;
			justify-content: space-between;

			// align-items: center;
			.title {
				font-weight: 900;
				font-size: 32rpx;
				line-height: 60rpx;
				margin-bottom: 25rpx;
			}

			.top-right {
				display: flex;
				margin-top: 10rpx;

				.moreText {
					color: #999;
				}

				.more {
					width: 35rpx;
					height: 35rpx;
					// font-size: 32rpx;
					color: #999;
					margin-top: 5rpx;
				}
			}
		}

		.middle {
			display: flex;
			width: 100%;

			.head {
				width: 20%;

				.head-img {
					width: 100rpx;
					height: 100rpx;
					background-color: #999;
					border-radius: 80rpx;
				}

			}

			.middle-right {
				width: 80%;

				.middle-right-top {
					margin-top: 12rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.phone {
						color: #000;
						font-size: 28rpx;
					}

				}

				.img-item {
					display: flex;
					flex-wrap: wrap;
					margin-top: 20rpx;

					.img-list {
						width: calc((100% - 20rpx)/2);
						margin-right: 20rpx;
						margin-bottom: 20rpx;

						.img {
							width: 100%;
							height: 160rpx;
							border-radius: 20rpx;
						}
					}

					.img-list:nth-child(2n) {
						margin-right: 0;
					}
				}

				.middle-right-middle {
					font-size: 28rpx;
					margin-top: 20rpx;
					color: #1A1A1A;
					line-height: 48rpx;
				}

				.middle-right-bottom {
					font-size: 28rpx;
					margin-top: 20rpx;
					color: #767676;
				}
			}

		}
	}
</style>